<template>
    <view class="AddBar" v-if="btnIndex === 0">

        <view
              :class="{ 'btn': true, 'active': false }"
              @touchstart="templateClick"
              :key="i">
            <image src="/static/AddBarImg/template.png" class="img" />
            <text class="text">模版</text>
        </view>

        <view
              :class="{ 'btn': true, 'active': false }"
              @touchstart="uploadClick"
              :key="i">
            <image src="/static/AddBarImg/upload.png" class="img" />
            <text class="text">上传</text>
        </view>

        <view
              :class="{ 'btn': true, 'active': false }"
              @touchstart="materialClick"
              :key="i">
            <image src="/static/AddBarImg/images.png" class="img" />
            <text class="text">素材</text>
        </view>

        <view
              :class="{ 'btn': true, 'active': false }"
              @touchstart="textClick"
              :key="i">
            <image src="/static/AddBarImg/text.png" class="img" />
            <text class="text">文字</text>
        </view>

        <view
              :class="{ 'btn': true, 'active': false }"
              @touchstart="showFineTuning"
              :key="i">
            <image src="/static/AddBarImg/fineTuning.svg" class="img" />
            <text class="text">微调</text>
        </view>

    </view>
</template>
<script>
import editorBarStore from "../editorBarStore";
import materialStore from "../MaterialModal/materialStore";
import { autorun } from "mobx";
import uploadImageStore from "../UploadImageModal/uploadImageStore";
import { mapMutations, mapActions, mapState } from "vuex";
import designEditorRender from "../../DesignEditor/designEditorRender";
import templateStore from "../TemplateModal/templateStore";

export default {
    name: "AddBar",
    // 数据
    data() {
        return {
            btnIndex: -1
        }
    },
    //方法
    methods: {
        // 点击素材按钮        
        materialClick() {
            materialStore.setVisible(true);
        },
        //点击上传按钮
        uploadClick() {
            if (!this.userToken) {
                Taro.navigateTo({ url: "/pages/login/index" });
                return;
            }
            uploadImageStore.setVisible(true);
        },
        //点击文字按钮
        textClick() {
            designEditorRender.addText("优T设计");
        },
        //点击微调按钮
        showFineTuning() {
            editorBarStore.setShowFineTuning(true);
        },
        //点击模版按钮
        templateClick() {
            templateStore.setVisible(true);
        },
    },
    // 计算属性
    computed: {
        ...mapState("userStore", {
            userToken: (state) => state.userToken
        }),
    },

    //安装完成
    mounted() {
        this.dispose = autorun(() => {
            this.btnIndex = editorBarStore.btnIndex;
        });
    },
};
</script>


<style scoped lang="scss">
.AddBar {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 48px;
    display: flex;
    background: #ffffff;
    box-shadow: 0px -4px 4px #dfdfdf;
    padding-bottom: calc(env(safe-area-inset-bottom) + 64px);
    padding-top: 4px;

    .btn {
        width: 20%;
        text-align: center;

        .img {
            display: block;
            margin: 0 auto;
            width: 28px;
            height: 28px;
        }

        .text {
            text-align: center;
            width: 100%;
            display: inline-block;
            font-size: 12px;
        }
    }

}
</style>